<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.userId"
        :placeholder="$t('goods_comment.placeholder.filter_user_id')"
        class="filter-item"
        clearable
        style="width: 200px;"
      />
      <el-select
        v-model="listQuery.status"
        :placeholder="$t('user_withdrawal.placeholder.filter_order_status')"
        class="filter-item"
        clearable
        style="width: 200px"
      >
        <el-option
          v-for="item in statusMap"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleFilter">
        {{ $t('app.button.search') }}
      </el-button>
      <el-button
        :loading="downloadLoading"
        class="filter-item"
        icon="el-icon-download"
        type="primary"
        @click="handleDownload"
      >{{ $t('app.button.download') }}
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('app.message.list_loading')"
      border
      fit
      highlight-current-row
    >
      <el-table-column :label="$t('user_withdrawal.table.id')" align="center" prop="userId" />
      <el-table-column :label="$t('user_withdrawal.table.realName')" align="center" prop="realName" />
      <el-table-column :label="$t('user_withdrawal.table.remark')" align="center" prop="remark" />
      <el-table-column :label="$t('user_withdrawal.table.bandCard')" align="center" prop="bandCard" />
      <el-table-column :label="$t('user_withdrawal.table.price')" align="center" prop="price" />
      <el-table-column :label="$t('user_withdrawal.table.createTime')" align="center" prop="createTime" />
      <el-table-column :label="$t('user_withdrawal.table.status')" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag>{{ op[scope.row.status] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('user_withdrawal.table.actions')"
        align="center"
        class-name="small-padding fixed-width"
        width="250"
      >
        <template v-slot="scope">
          <el-button size="mini" type="primary" @click="handleDialog(scope.row)">
            {{ $t('user_withdrawal.button.to_examine') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :limit.sync="listQuery.limit"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="getList"
    />
    <el-dialog
      :before-close="resetForm"
      :visible.sync="dialogVisible"
      title="提示"
      width="20%"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px">
        <el-form-item label="审核状态" prop="type">
          <el-radio-group v-model="ruleForm.status">
            <el-radio v-model="ruleForm.status" label="1">成功</el-radio>
            <el-radio v-model="ruleForm.status" label="2">失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { withdrawalList, withdrawalUpdate } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'Withdrawal',
  components: { Pagination },
  data() {
    return {
      statusMap: [
        {
          label: '待审核',
          value: 0
        },
        {
          label: '审核通过',
          value: 1
        },
        {
          label: '审核失败',
          value: 2
        }
      ],
      op: [
        '待审核',
        '审核成功',
        '审核失败'],
      ruleForm: {
        status: '1'
      },
      rules: {
        status: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        userId: undefined,
        status: ''
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      withdrawalList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.data
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          withdrawalUpdate(this.ruleForm).then((res) => {
            if (res.data.errno === 0) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.resetForm()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs['ruleForm'].resetFields()
      this.dialogVisible = false
      this.ruleForm = {
        status: '1'
      }
      this.handleFilter()
    },
    handleDialog(data) {
      this.dialogVisible = true
      this.ruleForm.id = data.id
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['用户ID', '姓名', '开户行', '卡号', '提现金额', '提现时间', '状态']
        const filterVal = ['id', 'realName', 'remark', 'bandCard', 'price', 'createTime', 'status']
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '商品评论信息')
        this.downloadLoading = false
      })
    }
  }
}
</script>
